<template>
  <div>
    <!-- 输出指令 -->
    <h1>我是：{{ tips }}</h1>
    <p v-text="tips">我是</p>
    <p v-html="mmm"></p>
    <!-- 保持原样输出 不解析保留格式 -->
    <p v-pre>{{ tips }}</p>
    <!-- 只输出一次 -->
    <p v-once>{{ tips }}</p>
    <button v-on:click="tips = '老貂蝉'">点击修改内容</button>

    <!-- 显示隐藏指令 -->
    <button @click="flage = !flage">点击显示与隐藏</button>
    <h2 v-show="flage">{{ sss }}</h2>
    <p v-if="flage">{{ sss }}</p>
    <button @click="age += 3">点击按钮{{ age }}</button>
    <ul>
      <li v-if="age < 18">你个小屁孩</li>
      <li v-else-if="age >= 18 && age < 30">你可以做美好的事情了</li>
      <li v-else>保温杯泡枸杞</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tips: '小貂蝉',
      mmm: '<i>老貂蝉</i>',
      sss: '天天敲代码',
      age: 15,
      flage: true
    }
  }
}
</script>

<style lang="scss" scoped></style>
